<template>
	<cl-dialog
		v-model="visible"
		class="tongkang-view-order"
		width="90%"
		:close-on-click-modal="false"
	>
		<el-card shadow="never">
			<template #header>
				<div class="card-header">
					<span>新增镜片订单</span>
				</div>
			</template>
			<el-form :model="orderData" label-width="120px" size="default">
				<el-row>
					<el-col :span="8">
						<el-form-item label="姓名">
							<el-input
								v-model="orderData.userName"
								style="background-color: #f5f7fa"
							/>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item label="电话">
							<el-input
								v-model="orderData.userPhone"
								style="background-color: #f5f7fa"
							/>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="支付金额" prop="data.o.c_is_process">
							<el-radio-group v-model="orderData.goodsId">
								<el-radio label="7">2680</el-radio>
								<el-radio label="1">3980</el-radio>
								<el-radio label="3">4280</el-radio>
							</el-radio-group>
						</el-form-item>
					</el-col>
					<el-col :span="24">
						<el-form-item label="选择商户">
							<shop-select v-model="orderData.shopId" :shopObj="shopObj" />
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="支付截图">
							<cl-upload v-model="orderData.payImg" />
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="验光单">
							<cl-upload v-model="orderData.eyeglassImg" />
						</el-form-item>
					</el-col>
				</el-row>

				<div class="form-actions">
					<el-button type="success" @click="submitForm">提交订单</el-button>
					<el-button @click="closeDialog">关闭</el-button>
				</div>
			</el-form>
		</el-card>
	</cl-dialog>
</template>

<script lang="ts" setup>
import { ref, reactive, watch } from 'vue';
import { ElMessage } from 'element-plus';
import { useCool } from '/@/cool';
import { useI18n } from 'vue-i18n';
import ShopSelect from './shop-select.vue';

const { service } = useCool();
const { t } = useI18n();
const visible = ref(false);
const emit = defineEmits(['closeDialog', 'update:modelValue']);

const props = defineProps({
	modelValue: {
		type: Boolean,
		default: false
	},
	shopObj: {
		type: Object,
		default: () => ({})
	}
});

// 订单数据
const orderData = reactive({
	userName: '',
	userPhone: '',
	goodsId: '',
	payImg: '',
	shopId: '',
	eyeglassImg: '',
});

// 重置orderData的数据
async function resetOrderData() {
	console.log('重置数据');
	Object.assign(orderData, {
		userName: '',
		userPhone: '',
		goodsId: '',
		payImg: '',
		eyeglassImg: '',
	});
}

// 提交订单
async function submitForm() {
	try {
		const res = await service.order.order.createOrderBackend(orderData);
		ElMessage.success('订单提交成功');
		resetOrderData();
		closeDialog();
	} catch (error) {
		ElMessage.error(error.message || '订单提交失败');
	}
}

// 关闭弹窗
function closeDialog() {
	emit('closeDialog');
}

// 监听 modelValue 变化
watch(
	() => props.modelValue,
	val => {
		visible.value = val;
	}
);

// 监听 visible 变化
watch(
	() => visible.value,
	val => {
		emit('update:modelValue', val);
	}
);
</script>
<style scoped>
.zhongtian-add-order {
	padding: 20px;
}

.card-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.detail-item,
.payment-item {
	margin-bottom: 20px;
}

.detail-header,
.payment-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.border-top-blue {
	border-top: 3px solid #409eff;
}

.form-actions {
	margin-top: 30px;
	text-align: center;
}

.form-actions .el-button {
	margin: 0 10px;
}

/* 添加新的样式类 */
.inline-flex-container {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
}
</style>
